<template>
	<view @tap="Preview_img">
		<image style="width: 164rpx;height: 150rpx;border-radius: 12rpx;" :src="list[0]"></image>
		<view class="quantity_text" v-if="list && list.length > 0">
			<view style="text-align: center;display: flex;justify-content: center;align-items: center;">
				<view class="text">点击放大</view>
				<view class="sum">{{list.length}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				required: true
			},
			control: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {

			}
		},
		created() {

		},
		methods: {
			Preview_img() {
				if (this.list && this.list.length > 0) {
					uni.previewImage({
						current: 0,
						urls: this.list,
					});
				}
			}
		}

	}
</script>

<style lang="scss">
	.quantity_text {
		display: flex;
		position: absolute;
		width: 164rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 12rpx 12rpx;
		backdrop-filter: blur(30rpx);
		// background-color: #242424;
		// opacity: 0.8;
		margin-top: -45rpx;
		text-align: center;
		justify-content: center;

		.text {
			font-size: 23rpx;
		}

		.sum {
      position: absolute;
      margin-left: 130rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 22rpx; /* 圆的直径 */
      height: 22rpx; /* 圆的直径 */
      border-radius: 50%; /* 圆形 */
      background-color: #ffffff; /* 背景颜色 */
      border: 1px solid #0052ea; /* 边框 */
      font-size: 18rpx; /* 字体大小 */
      font-weight: bold; /* 字体加粗 */
      color: #0052ea; /* 字体颜色 */
		}
	}
</style>
